<template>
  <div class="background" ref="back"></div>
  <div id="popup" ref="pop" >
    <div class="header" @mousedown="popmove">
      <div id="content">添加事件</div>
      <div id="close" @click="del">X</div>
    </div>

    <table>
      <tr>
        <td>事件编号</td>
        <td><input type="text" v-model="num" /></td>
      </tr>
      <tr>
        <td>事件类型</td>
        <td>
          <select name="msgtype" class="message" v-model="type">
            <option value="1">刮擦</option>
            <option value="2">碰撞</option>
            <option value="3">失火</option>
            <option value="4">翻车</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>事件等级</td>
        <td>
          <select class="message" v-model="grade">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>发生时间</td>
        <td><input type="date" class="message" v-model="time" /></td>
      </tr>
      <tr>
        <td>发生地点</td>
        <td><input type="text" v-model="place" /></td>
      </tr>
      <tr>
        <td>车牌号</td>
        <td><input type="text" v-model="carnum" /></td>
      </tr>
      <tr>
        <td>驾驶员</td>
        <td><input type="text" v-model="name" /></td>
      </tr>
      <tr>
        <td>处理状态</td>
        <td>
          <select name="" id="" class="message" v-model="state">
            <option value="6">待处理</option>
            <option value="4">处理中</option>
            <option value="90">已归档</option>
          </select>
        </td>
      </tr>
    </table>

    <div class="choose">
      <div class="add" @click="add">提交</div>
      <div class="del" @click="del">取消</div>
    </div>
  </div>
</template>

<script setup>
import { inject, onMounted, ref, watch } from "vue";
import { point } from "./hooks/addPoint";
import { setMarkerStyle } from "./update/setMarkerStyle";
import { useMenuStore } from "../../store/index"

let $store = useMenuStore()

let num = ref(''); //编号
let type = ref(); //类型
let grade = ref(); // 等级
let time = ref('');  //时间
let place = ref(''); //地点
let carnum = ref(''); //车牌
let name = ref(''); //驾驶员
let state = ref(); //状态

let $map;
let $docLayer
let position = ref();
const pop = ref();

// 创建画笔画布
const source = new ol.source.Vector({});
const layer = new ol.layer.Vector({
  source,
});
// 创建画笔
let draw = new ol.interaction.Draw({
  type: "Point",
  source,
});

watch(() => $store.activeIndex, val => {
  if (val == "2-1") {
    $map.addInteraction(draw);
    // popup弹窗
    $map.on("click", popposition);
  } else {
    $map.removeInteraction(draw);
    pop.value.style.display = "none";
    $map.un("click", popposition);
    $map.removeLayer(player);
    source.clear()
  }
})

function popposition(e) {
  source.clear()
  $map.removeLayer(player);
  position.value = e.coordinate
  let center = e.coordinate; //经纬转像素
  let pixel = $map.getPixelFromCoordinate(center); //经纬度转屏幕坐标

  // 弹窗位置
  pop.value.style.left = pixel[0] + "px";
  pop.value.style.top = pixel[1] + 90 + "px";
  // 判定弹窗显隐
  if (pixel && $store.activeIndex == "2-1") {
    pop.value.style.display = "flex";
  } else {
    pop.value.style.display = "none";
  }
}
// 点击后标注
let player
watch(() => position.value, val => {
  if (val) {
    let point = new ol.Feature({
      geometry: new ol.geom.Point([position.value[0], position.value[1]])
    })
    const icon = setMarkerStyle('src/assets/location.png')
    point.setStyle(icon)
    const source = new ol.source.Vector({
      features: [point]
    })
    player = new ol.layer.Vector({
      source
    })
    $map.addLayer(player)
  }
})

onMounted(() => {
  $map = inject("$map");
  $docLayer = inject("$docLayer")
  $map.addLayer(layer);
});

const add = () => {
  let attr = [
    { name: "事件编号", type: "string", value: num.value },
    { name: "事件类型", type: "string", value: type.value },
    { name: "事件等级", type: "number", value: grade.value },
    { name: "发生时间", type: "string", value: time.value },
    { name: "发生地点", type: "string", value: place.value },
    { name: "车牌号", type: "string", value: carnum.value },
    { name: "驾驶员", type: "string", value: name.value },
    { name: "处理状态", type: "number", value: state.value },
  ];
  let service = {
    name: "guanggu",
    layerId: 2,
  };
  // 调用方法
  let POINST_STYLE = {
    Angle: 0,
    Color: state.value, //子图颜色
    Space: 0,
    SymHeight: 5,//高度
    SymWidth: 5, //宽度
    SymID: 21,//子图号
  }
  point(
    position,
    attr,
    service,
    POINST_STYLE,
    $docLayer
  );
  pop.value.style.display = "none";
  source.clear()
  $docLayer.refresh();
  $map.removeLayer(player);
};
// 清除画笔点击后的图标
const del = () => {
  pop.value.style.display = "none";
  source.clear()
  $map.removeLayer(player);
};

// 挪动pop弹窗
let back = ref()
const popmove = () => {

  document.onmousemove = (el) => {
    back.value.style.position = "absolute"
    let mouseX = el.clientX
    let mouseY = el.clientY

    pop.value.style.left =mouseX+ "px";
  pop.value.style.top = mouseY  + "px";
  }
  document.onmouseup = () => {
    back.value.style.position = "static"
    document.onmousemove = null;
  };
}
</script>

<style scoped>
.background{
    width: 100%;
    height: 100%;
    position : static;
    background-color: #302e2e;
    z-index: 2000;
    opacity: 0.4;
}
#popup {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 300px;
  height: 320px;
  position: fixed;
  z-index: 5000;
  top: 20px;
  left: 30px;
  background-color: #fff;
  border-radius: 5px;
  display: none;
  gap: 10px;
}

table {
  width: 90%;
}

td {
  text-align: center;
  border: 1px solid rgb(194, 190, 190);
}

.header {
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 35px;
  width: 100%;
  background-color: rgb(71, 77, 241);
  border-radius: 5px 5px 0px 0px;
}

.choose {
  display: flex;
  gap: 30px;
}

.add {
  width: 50px;
  border-radius: 5px;
  text-align: center;
  background-color: aqua;
}

.del {
  width: 50px;
  border-radius: 5px;
  text-align: center;
  border: 1px solid rgb(194, 190, 190);
}

.input {
  width: 90%;
}

.message {
  width: 90%;
}

.add:hover {
  cursor: pointer;
}

.del:hover {
  cursor: pointer;
}

#close {
  width: 20px;
  color: cadetblue;
}

#close:hover {
  cursor: pointer;
}

#content {
  color: #fff;
}
</style>